<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader class="product_tabs" hidden-breadcrumb>
        <div slot="title">
          <router-link :to="{ path: '/admin/marketing/feedback/disposition' }"
            ><Button icon="ios-arrow-back" size="small" class="mr20"
              >返回</Button
            ></router-link
          >
          <span
            v-text="$route.params.id ? '用户反馈列表' : '用户反馈列表'"
            class="mr20"
          ></span>
          <Button
              class="ml20"
              @click="exports"
              >&nbsp;&nbsp;导出&nbsp;&nbsp;</Button
            >
        </div>
      </PageHeader>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Table
        :columns="columns"
        :data="tableData"
        :loading="loading"
        style="width: 100%"
      >
        <template slot-scope="{ row }" slot="customerName">
            <span>
                {{ row.user.real_name }}
            </span>
        </template>
        <template slot-scope="{ row }" slot="phone">
            <span>
                {{ row.user.phone }}
            </span>
        </template>
        <template slot-scope="{ row }" slot="adviser_name">
            <span>
                {{ row.user.adviser_name }}
            </span>
        </template>
        <template slot-scope="{ row }" slot="source">
            <span v-if="row.source">{{ row.source }}</span>
            <span v-else>小程序</span>
        </template>
        <template slot-scope="{ row }" slot="createTime">
          <span> {{ row.add_time | formatDate }}</span>
        </template>
        <template slot-scope="{ row }" slot="feedback">
          <div class="feedback-detail">
            <div
              v-for="(feedback, index) in row.answer"
              :key="index"
              class="feedback-item"
            >
              <div v-if="feedback.type == 'image'" class="imageCen">{{index+1}}. {{ feedback.question_text }}:
                 <img class="image" v-for="(item,index) in feedback.answer_text" :key="index" :src="item" alt=""></img>
              </div>
              <div v-else>{{index+1}}. {{ feedback.question_text }}: <span style="color:red">{{ feedback.answer_text }}</span></div>
            </div>
          </div>
        </template>
      </Table>
      <Page
        :total="total"
        :current="searchForm.page"
        :page-size="searchForm.limit"
        show-total
        @on-change="handlePageChange"
        style="margin-top: 20px; text-align: right"
      />
    </Card>
  </div>
</template>

<script>
import { surveyLog,surveyResponses } from "@/api/marketing";
import { formatDate } from "@/utils/validate"; 
import exportExcel from "@/utils/newToExcel.js";
export default {
    filters: {
        formatDate(time) {
        if (time !== 0) {
            let date = new Date(time * 1000);
            return formatDate(date, "yyyy-MM-dd hh:mm:ss");
        }
        },
    },
  data() {
    return {
      searchForm: {
        survey_id: this.$route.params.id,
        status: "",
        page: 1,
        limit: 10,
      },
      columns: [
        {
          title: "用户姓名",
          slot: "customerName",
          width: 120,
        },
        {
          title: "联系方式",
          slot: "phone",
          width: 150,
        },
        {
          title: "隶属人",
          slot: "adviser_name",
          width: 150,
        },
        {
          title: "填写位置",
          slot: "source",
          width: 150,
        },
        {
          title: "提交时间",
          slot: "createTime",
          width: 150,
        },
        {
          title: "反馈详情",
          slot: "feedback",
          minWidth: 300,
        },
      ],
      tableData: [],
      total: 0,
      loading: false,
    };
  },
    created(){
        if (this.$route.params.id) {
            this.itemId = this.$route.params.id
            this.getList();
        }
    },
  methods: {
    handleSearch() {
      this.searchForm.page = 1;
      this.getList();
    },
    handlePageChange(page) {
      this.searchForm.page = page;
      this.getList();
    },
    getList() {
        this.loading = true;
        surveyLog(this.$route.params.id,this.searchForm).then(res => {
            // this.tableData = res.data.list;
            this.total = res.data.count;
            this.loading = false;
            let list = res.data.list;
            for(let i = 0; i < list.length; i++){
              for(let j = 0; j < list[i].answer.length; j++){
                const answerText = list[i].answer[j].answer_text;
                // 修正正则表达式的写法，注意斜杠的转义
                const isImageUrl = /^https?:\/\/.+\.(png|jpg|jpeg|gif|bmp|webp)$/i.test(answerText);
                
                if(isImageUrl) {
                  // 如果是图片URL，转换为数组形式
                  list[i].answer[j].answer_text = answerText.split(',');
                  list[i].answer[j].type = 'image'
                }
              }
              this.tableData = list
               console.log(this.tableData,6666666)
            }
        }).catch(err => {
            this.$Message.error(err.msg);
        });
    },
    async exports(){
        let [th, filekey, data, fileName] = [[], [], [], ""];
        let excelData = JSON.parse(JSON.stringify(this.searchForm));
        // console.log(excelData,"1111")
        excelData.page = 1;
        for (let i = 0; i < excelData.page + 1; i++) {
            let lebData = await this.getExcelData(excelData);
            if (!fileName) fileName = lebData.filename;
            if (!filekey.length) {
            filekey = lebData.filekey;
            }
            if (!th.length) th = lebData.header;
            if (lebData.export.length) {
                data = data.concat(lebData.export);
                excelData.page++;
            }
        }
        exportExcel(th, filekey, fileName, data);
    },
    getExcelData(excelData) {
        return new Promise((resolve, reject) => {
          surveyResponses(excelData).then((res) => {
            return resolve(res.data);
            });
        });
    }
  },
};
</script>

<style scoped>
.feedback-detail {
  padding: 10px;
  background-color: #f8f8f9;
  border-radius: 4px;
}

.feedback-item {
  margin-bottom: 8px;
  padding: 8px;
  background-color: #fff;
  border-radius: 4px;
}

.feedback-item:last-child {
  margin-bottom: 0;
}
.imageCen{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.image{
  margin-right: 30px;
  width: 100px;
  height: 100px;
}
</style>
